import React, { useState } from 'react';
import LTable from '@/components/LTable';
import { userList, userMsg } from '../service';
import { columns } from '../data';
import BasicModal from './Modal';

export default function TestTable() {
  const [visible, setVisible] = useState(false);
  const [user, setUser] = useState({});
  const editUser = async (id: string) => {
    const res = await userMsg(id);
    setVisible(true);
    setUser(res);
  };
  const handleCancel = () => {
    setUser({});
    setVisible(false);
  };
  const params = {};
  const baseProps = {};
  const owncolumns = (fun: any) => {
    return [
      ...columns,
      {
        title: '操作',
        valueType: 'option',
        key: 'option',
        render: (_: any, record: any) => [
          <a
            key="editable"
            onClick={() => {
              editUser(record.id);
              fun();
            }}
          >
            编辑
          </a>,
        ],
      },
    ];
  };
  return (
    <div>
      <LTable
        queryAction={userList}
        owncolumns={owncolumns}
        params={params}
        baseProps={baseProps}
      />
      <BasicModal visible={visible} handleCancel={handleCancel} user={user} />
    </div>
  );
}
